<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src='../prototype.js'></script>
<script src='../protohover.js'></script>
<script src='../jsinterpolate.js'></script>
<script src='../intervalometer.js'></script>
<script src='../../protoanimate.js'></script>
<script>
/*
		this is how a "raw animation" is created
		// create an interpolator with start and end conditions
		i = Interpolate({width:"10px"}, {width:'1000px'});
		// apply that interpolator to the style of an object over time
		f = new FixedIntervalometer(1000, 10, function(position) {
			$('box3').setStyle(i(position));
		});
*/

	Event.observe(window, 'load', function() {
		function tab_test() {
			var tab_animation = AnimationFactory({'top': '5px'},  {'top': '0px'}, 150, 10);

			$$('#nav1 li').each(function(elem){
				var ta = tab_animation(elem);
				elem.hover(ta.forward, ta.revers);
			});
		}
		tab_test();
	});
</script>
<style>
	body {
		font-family: Verdana, "Helvetica Neue", Helvetica, Areal, sans-serif;
	}

	div.header {
		position: relative;
		width: 100%;
		height: 64px;
	}
	
	#navigation {
		position:relative;
		width: 100%;
		height: 30px;
		overflow: hidden;
	}

	#navigation #nav1 {
		padding: 0px;
		margin: 0px;

		border-bottom: 1px solid #eee;
		float: left;
		list-style: none;		
	}

	#navigation #nav1 li {
		position: relative;
		float: left;
		color: #333;
		margin: 0;
		background: none;
		padding: 0;
		height: 195px;
		background: url(tab_body.gif) 0 0 no-repeat;
		top: 5px;
	}

	#navigation #nav1 li span {
		display: block;
		position: absolute;
		height: 195px;
		width: 10px;
		background: url(tab_r.gif) 0 0 no-repeat;
		right: 0;
		top:0;
	}

	#navigation #nav1 li a {
		color: #333;
		display: block;
		padding: 2px 10px;
		text-decoration: none;
		text-transform: uppercase;
	}

	#navigation #nav1 li a:hover, #content #nav1 li a:hover span { background-position: 0 -194px; color: #3f5f5a; }
	#navigation #nav1 li a:active, #content #nav1 li a:active span { background-position: 0 -388px; color: #fff; }
	
	div#pages {
		width: 480px;
		height: 280px;
	}
</style>
</head>
<body>
	<div id="header">
		<p>Prototype Animation</p>
	</div>
	<div id='navigation'>
		<ul id="nav1">
			<li><a href="#opacity">Opacity</a><span></span></li>
			<li><a href="#width">Width/Height</a><span></span></li>
			<li><a href="#animation">Animations</a><span></span></li>
		</ul>
	</div>
	<div id="content">
		<div id="pages">
			<div id="opacity">
			</div>
			<div id="width">
			</div>
			<div id="animation">
			</div>
		</div>
	</div>
</body>
</html>
